<template>
  <div class="DetailIndex">
    <el-header class="custom-el-header">
        <!-- 头像 -->

        <div class="demo-basic--circle">
          <div
            class="block"
            style=" margin-left: 2030%;"
          >
            <el-avatar :size="65" :src="userForm.imageIcon"></el-avatar>
          </div>
        </div>
        <div
        style="
          margin-left: 100px;
          margin-top: 0px;
          margin-left: 90%;
          font-weight: bold;
        "
      >
        {{ userForm.userName }}
      </div>

      </el-header>
    <el-container>

      <el-main style="height: 100%;background-color: #f5f5f5;"><router-view></router-view></el-main>
    </el-container>

    <!-- 二级路由出口，展示二级组件 -->
  </div>
</template>

<script>
import store from '@/store'
export default {
  name: 'DetailIndex',
  data () {
    return {
      // 用户数据
      userForm: {
        uid: '',
        userName: '用户XXX',
        password: '',
        imageIcon: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' // 用户头像地址
      }
      // this.userForm.userName= store.getters.userName
    }
  },
  created () {
    // Use store to set userForm data
    this.userForm.userName = store.state.user.userInfo.userName
    this.userForm.uid = store.state.user.userInfo.id
  }
}
</script>

<style lang="less" scoped>
.custom-el-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Optional: Add if you want horizontal alignment */
  /* Add any other necessary styles */
  text-align: center;
}
el-container {
// margin-bottom: 40px;
height: 100%;
}

body,html{
height: 100%;
}

</style>
